<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title>Wedding Bliss - a Unique HTML Template For Your Wedding Celebration</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimum-scale=1">

        <!-- INCLUDE BOOTSTRAP CSS -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">

        <!-- INCLUDE AUTHOR CSS -->
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">

        <!-- INCLUDE animate CSS -->
        <link rel="stylesheet" href="css/animate.min.css">

        <!-- THE FANYCYBOX CSS -->
        <link rel="stylesheet" href="megafolio/fancybox/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />

        <!-- INCLUDE GOOGLE FONTS -->
        <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Cinzel:400,700|Great+Vibes' rel='stylesheet' type='text/css'>        

        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>

    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
    
    <!-- =========================================================================================================
    ==============================================================================================================
                                                The Header Area With The Menu
    ==============================================================================================================
    ============================================================================================================== -->  

    <header class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <div class="names"> Sharon &#38; Michael</div><!-- /.names -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <nav class="navbar-collapse collapse">
                <ul class="nav navbar-nav left-nav">
                    <li class="active"><a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="200">Home <b class="caret"></b></a>
                        <ul class="dropdown-menu">

                            <li><a href="index.html#thetop">Home</a></li>
                            <li class="divider"></li>
                            <li><a href="uielements.html">UI Elements</a></li>
                            <li class="divider"></li>
                            <li><a href="leftcolumn.html">Left Column Page</a></li>
                            <li class="divider"></li>
                            <li><a href="rightcolumn.html">Right Column Page</a></li>
                            
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="200">The Wedding <b class="caret"></b></a>
                        <ul class="dropdown-menu">

                            <li><a href="index.html#ourstory">Our Story</a></li>
                            <li class="divider"></li>
                            <li><a href="index.html#thebrideside">Bride's Party</a></li>
                            <li class="divider"></li>
                            <li><a href="index.html#thegroomside">Groom's Party</a></li>
                            <li class="divider"></li>
                            <li><a href="index.html#weddinglocation">Wedding Location</a></li>
                            
                        </ul>
                    </li>
                    <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="200">Blog <b class="caret"></b></a>
                        <ul class="dropdown-menu">

                            <li><a href="index.html#blog1">Blog Style 1</a></li>
                            <li class="divider"></li>
                            <li><a href="index.html#blog2">Blog Style 2</a></li>

                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="200">Gallery <b class="caret"></b></a>
                        <ul class="dropdown-menu">

                            <li><a href="index.html#gallery1">Gallery Style 1</a></li>
                            <li class="divider"></li>
                            <li><a href="index.html#gallery2">Gallery Style 2</a></li>
                            
                        </ul>
                    </li>
                </ul>
                 <a class="navbar-brand" href="#">25 July, 2014</a>

                <ul class="nav navbar-nav right-nav">
                    <li><a href="index.html#registry">Registry</a></li>
                    <li><a href="index.html#guestbook">Guest Book</a></li>
                    <li><a href="index.html#rsvp">Events / RSVP</a></li>
                    <li><a href="#" data-toggle="modal" data-target="#myModal">Contact</a></li>
                </ul>
            </nav><!--/.navbar-collapse -->

        </div><!-- /.container-->
    </header>


    <!-- =========================================================================================================
    ==============================================================================================================
                                                    Tables
    ==============================================================================================================
    ============================================================================================================== -->
    <section id="uielements">
        <div id="uielementsphoto">
                
                <div class="section-overlay">
                    <div class="container">
                        <div class="row">
                            <header class="col-md-6 col-md-offset-3">
                                User Interface Elements
                                <span>home / user interface elements</span>
                            </header>
                        </div>
                    </div>
                </div>
            
        </div><!-- /#uielementsphoto -->
    
        <div class="container">
                
            <div class="row">
                <h3>Tables</h3>
                <div class="col-md-6">
                    <h4>Striped</h4>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-md-6">
                    <h4>With Borders</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td rowspan="2">1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@TwBootstrap</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td colspan="2">Larry the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div><!-- /.col-md-6 -->
            </div><!-- /.row -->

            <div class="row">
                <h3>Buttons</h3>
                <div class="col-md-12">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Button</th>
                                <th>Large Button</th>
                                <th>Small Button</th>
                                <th>Disabled Button</th>
                                <th>Button with Icon</th>
                                <th>Block Button</th>
                            </tr>
                        </thead>
                        
                        <tbody>
                        <tr>
                            <td><a href="#" class="btn btn-default">Default</a></td>
                            <td><a href="#" class="btn btn-lg btn-default">Default</a></td>
                            <td><a href="#" class="btn btn-sm btn-default">Default</a></td>
                            <td><a href="#" class="btn disabled btn-default">Default</a></td>
                            <td><a href="#" class="btn btn-default"><i class="icon-cog"></i> Default</a></td>
                            <td><a href="#" class="btn btn-block btn-default">Default</a></td>
                        </tr>
                        <tr>
                            <td><a href="#" class="btn btn-primary">Primary</a></td>
                            <td><a href="#" class="btn btn-primary btn-lg">Primary</a></td>
                            <td><a href="#" class="btn btn-primary btn-sm">Primary</a></td>
                            <td><a href="#" class="btn btn-primary disabled">Primary</a></td>
                            <td><a href="#" class="btn btn-primary"><i class="icon-shopping-cart icon-white"></i> Primary</a></td>
                            <td><a href="#" class="btn btn-primary btn-block">Primary</a></td>
                        </tr>
                        <tr>
                            <td><a href="#" class="btn btn-info">Info</a></td>
                            <td><a href="#" class="btn btn-info btn-lg">Info</a></td>
                            <td><a href="#" class="btn btn-info btn-sm">Info</a></td>
                            <td><a href="#" class="btn btn-info disabled">Info</a></td>
                            <td><a href="#" class="btn btn-info"><i class="icon-exclamation-sign icon-white"></i> Info</a></td>
                            <td><a href="#" class="btn btn-info btn-block">Info</a></td>
                        </tr>
                        <tr>
                            <td><a href="#" class="btn btn-success">Success</a></td>
                            <td><a href="#" class="btn btn-success btn-lg">Success</a></td>
                            <td><a href="#" class="btn btn-success btn-sm">Success</a></td>
                            <td><a href="#" class="btn btn-success disabled">Success</a></td>
                            <td><a href="#" class="btn btn-success"><i class="icon-ok icon-white"></i> Success</a></td>
                             <td><a href="#" class="btn btn-success btn-block">Success</a></td>
                        </tr>
                        <tr>
                            <td><a href="#" class="btn btn-warning">Warning</a></td>
                            <td><a href="#" class="btn btn-warning btn-lg">Warning</a></td>
                            <td><a href="#" class="btn btn-warning btn-sm">Warning</a></td>
                            <td><a href="#" class="btn btn-warning disabled">Warning</a></td>
                            <td><a href="#" class="btn btn-warning"><i class="icon-warning-sign icon-white"></i> Warning</a></td>
                            <td><a href="#" class="btn btn-warning btn-block">Warning</a></td>
                        </tr>
                        <tr>
                            <td><a href="#" class="btn btn-danger">Danger</a></td>
                            <td><a href="#" class="btn btn-danger btn-lg">Danger</a></td>
                            <td><a href="#" class="btn btn-danger btn-sm">Danger</a></td>
                            <td><a href="#" class="btn btn-danger disabled">Danger</a></td>
                            <td><a href="#" class="btn btn-danger"><i class="icon-remove icon-white"></i> Danger</a></td>
                            <td><a href="#" class="btn btn-danger btn-block">Danger</a></td>
                        </tr>
                      </tbody>
                    </table>
                </div>
            </div><!-- /.row -->

            <div class="row">
                <h3>Typography</h3>
                <div class="col-md-4">
                    <h1>h1. Heading 1</h1>
                    <h2>h2. Heading 2</h2>
                    <h3>h3. Heading 3</h3>
                    <h4>h4. Heading 4</h4>
                    <h5>h5. Heading 5</h5>
                    <h6>h6. Heading 6</h6>
                </div>

                <div class="col-md-8">
                    <h4>Paragraph</h4>
                    <p>Normal Text. Lorem ipsum dolor sit amet, a mark here adipisicing elit. Atque, iusto, minus sequi natus nesciunt rerum tenetur corrupti autem officiis fugiat expedita laudantium ea aspernatur</p>
                    <p><b>Bold Text. Lorem ipsum dolor sit amet, a mark here adipisicing elit. Atque, iusto, minus sequi natus nesciunt rerum tenetur corrupti autem officiis fugiat expedita laudantium ea aspernatur </b></p>
                    <p><i>Italic Text. Lorem ipsum dolor sit amet, a mark here adipisicing elit. Atque, iusto, minus sequi natus nesciunt rerum tenetur corrupti autem officiis fugiat expedita laudantium ea aspernatur </i></p>
                    <p>Emphasise Text. <span class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</span> <strong class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</strong><span class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</span><strong class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</strong><span class="text-warning">Etiam porta sem malesuada magna mollis euismod.</span><strong class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</strong>
                    </p>
                </div>
            </div><!-- /.row-->

            <div class="row">

                <div class="col-md-6">
                    <h4>Lists</h4>
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
                        <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
                        <li>Here is a nested unordered list
                            <ul>
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>sed do eiusmod tempor incididunt</li>
                                <li>ut labore et dolore magna aliqua</li>
                            </ul>
                        </li>
                        <li>Sed ut perspiciatis unde omnis iste natus</li>
                        <li>sed quia non numquam eius modi</li>
                        <li>And here is a nested ordered list
                            <ol>
                                <li>First item</li>
                                <li>The Second item</li>
                                <li>Some Third item</li>
                                <li>And fourth and the last item</li>
                            </ol>
                        </li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
                        <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
                    </ul>
                </div>

                <div class="col-md-6">
                    <h4>Lead text</h4>
                    <p class="lead">Quisquam, dolorum, iusto iste voluptates rerum ea quas expedita. </p>
                    <h4>Small text</h4>
                    <p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et ullam libero repellendus voluptatibus obcaecati magni id nulla dolores nesciunt. Quasi quisquam facilis nobis ullam rem deleniti vero consectetur earum.</small></p>
                    <h4>A Quote</h4>
                    <blockquote>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                        <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
                    </blockquote>
                </div>
            </div><!-- /.row -->

            <div class="row">
                <div class="col-md-4">
                    <h2>Alerts</h2>
                    <div class="alert alert-warning">
                      <button data-dismiss="alert" class="close" type="button">×</button>
                      <strong>Warning!</strong> Best check yo self, you're not looking too good.
                    </div>
                    <div class="alert alert-danger">
                      <button data-dismiss="alert" class="close" type="button">×</button>
                      <strong>Oh snap!</strong> Change a few things up and try submitting again.
                    </div>
                    <div class="alert alert-success">
                      <button data-dismiss="alert" class="close" type="button">×</button>
                      <strong>Well done!</strong> You successfully read this important alert message.
                    </div>
                    <div class="alert alert-info">
                      <button data-dismiss="alert" class="close" type="button">×</button>
                      <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                    </div>
                </div>

                <div class="col-md-4" >
                    <h2>Progress Bar</h2>
                    <div class="progress ">
                      <div style="width: 20%" class="progress-bar"><span>default</span></div>
                    </div>
                    <div class="progress ">
                      <div style="width: 40%" class="progress-bar progress-bar-info"><span>.info</span></div>
                    </div>
                    <div class="progress ">
                      <div style="width: 60%" class="progress-bar progress-bar-success"><span>.success</span></div>
                    </div>
                    <div class="progress ">
                      <div style="width: 75%" class="progress-bar progress-bar-warning"><span>.warning</span></div>
                    </div>
                    <div class="progress ">
                      <div style="width: 90%" class="progress-bar progress-bar-danger"><span>.danger</span></div>
                    </div>
                    <div class="progress progress-striped">
                      <div style="width: 40%" class="progress-bar progress-bar-success"></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <h2>Accordion</h2>
                    <div id="accordion" class="panel-group">
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a href="#collapseOne" data-parent="#accordion" data-toggle="collapse">
                              Collapsible Group Item #1
                            </a>
                          </h4>
                        </div>
                        <div class="panel-collapse collapse in" id="collapseOne">
                          <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                          </div>
                        </div>
                      </div>
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a href="#collapseTwo" data-parent="#accordion" data-toggle="collapse">
                              Collapsible Group Item #2
                            </a>
                          </h4>
                        </div>
                        <div class="panel-collapse collapse" id="collapseTwo">
                          <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                          </div>
                        </div>
                      </div>
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a href="#collapseThree" data-parent="#accordion" data-toggle="collapse">
                              Collapsible Group Item #3
                            </a>
                          </h4>
                        </div>
                        <div class="panel-collapse collapse" id="collapseThree">
                          <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <h2>Icon Glyphs</h2>
                    <p>Includes 200 glyphs in font format from the Glyphicon Halflings set.</p>
                    <ul class="bs-glyphicons">
                          <li>
                            <span class="glyphicon glyphicon-adjust"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-align-center"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-align-justify"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-align-left"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-align-right"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-arrow-down"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-arrow-left"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-arrow-right"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-arrow-up"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-asterisk"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-backward"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-ban-circle"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-barcode"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-bell"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-bold"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-book"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-bookmark"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-briefcase"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-bullhorn"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-calendar"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-camera"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-certificate"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-check"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-chevron-down"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-chevron-left"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-chevron-right"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-chevron-up"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-circle-arrow-down"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-circle-arrow-left"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-circle-arrow-right"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-circle-arrow-up"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-cloud"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-cloud-download"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-cloud-upload"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-cog"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-collapse-down"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-collapse-up"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-comment"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-compressed"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-copyright-mark"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-credit-card"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-cutlery"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-dashboard"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-download"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-download-alt"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-earphone"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-edit"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-eject"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-envelope"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-euro"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-exclamation-sign"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-expand"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-export"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-eye-close"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-eye-open"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-facetime-video"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-fast-backward"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-fast-forward"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-file"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-film"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-filter"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-fire"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-flag"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-flash"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-floppy-disk"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-floppy-open"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-floppy-remove"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-floppy-save"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-floppy-saved"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-folder-close"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-folder-open"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-font"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-forward"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-fullscreen"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-gbp"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-gift"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-glass"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-globe"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-hand-down"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-hand-left"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-hand-right"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-hand-up"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-hd-video"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-hdd"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-header"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-headphones"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-heart"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-heart-empty"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-home"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-import"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-inbox"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-indent-left"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-indent-right"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-info-sign"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-italic"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-leaf"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-link"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-list"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-list-alt"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-lock"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-log-in"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-log-out"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-magnet"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-map-marker"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-minus"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-minus-sign"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-move"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-music"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-new-window"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-off"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-ok"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-ok-circle"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-ok-sign"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-open"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-paperclip"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-pause"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-pencil"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-phone"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-phone-alt"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-picture"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-plane"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-play"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-play-circle"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-plus"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-plus-sign"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-print"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-pushpin"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-qrcode"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-question-sign"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-random"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-record"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-refresh"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-registration-mark"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-remove"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-remove-circle"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-remove-sign"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-repeat"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-resize-full"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-resize-horizontal"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-resize-small"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-resize-vertical"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-retweet"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-road"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-save"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-saved"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-screenshot"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-sd-video"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-search"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-send"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-share"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-share-alt"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-shopping-cart"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-signal"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-sort"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-sort-by-alphabet"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-sort-by-attributes"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-sort-by-order"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-sort-by-order-alt"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-sound-5-1"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-sound-6-1"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-sound-7-1"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-sound-dolby"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-sound-stereo"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-star"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-star-empty"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-stats"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-step-backward"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-step-forward"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-stop"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-subtitles"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-tag"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-tags"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-tasks"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-text-height"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-text-width"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-th"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-th-large"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-th-list"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-thumbs-down"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-thumbs-up"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-time"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-tint"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-tower"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-transfer"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-trash"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-tree-conifer"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-tree-deciduous"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-unchecked"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-upload"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-usd"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-user"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-volume-down"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-volume-off"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-volume-up"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-warning-sign"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-wrench"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-zoom-in"></span>
                          </li>
                          <li>
                            <span class="glyphicon glyphicon-zoom-out"></span>
                          </li>
                        </ul>
                </div>
            </div>
            
              
        </div> <!-- /.container --> 

    </section><!-- /.uielements -->




     <!-- =========================================================================================================
    ==============================================================================================================
                                            "Contact Us" form
    ==============================================================================================================
    ============================================================================================================== -->

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Send Us a Message</h4>
                </div>
                
                <!-- the actual form begins -->
                <form id="contactus" method="post" action="send_mail.php" role="form">

                    <div class="modal-body">
                        
                        <p>Have any question of message for us? We'll always try to get back to you as soon as possible. Please use the form below and we'll receive your message in our inbox, only for us to see</p>

                        <!-- NAME -->
                        <div class="form-group">
                            <label for="contactname">Name</label>
                            <input type="text" class="form-control" id="contactname" name="contactname" placeholder="Your Name">
                        </div>

                        <!-- EMAIL -->
                        <div class="form-group">
                            <label for="contactemail">Email address</label>
                            <input type="email" class="form-control" id="contactemail" name="contactemail" placeholder="Your Email">
                        </div>

                        <!-- MESSAGE -->
                        <div class="form-group">
                            <label for="contactmessage">Your Message</label>
                            <textarea class="form-control" rows="3" placeholder="Please Enter Your Message" id="contactmessage" name="contactmessage"></textarea>
                        </div>
                       
                    </div><!-- /.modal-body -->
                    
                    <div class="modal-footer" id='cf_submit_m'>

                        <!-- SUBMIT BUTTON -->
                        <input type="submit" value="Send Message" id="send_contact_message" class="btn btn-primary">
                    </div><!-- /.modal-footer -->

                        <!-- SUCCESS/ERROR FIELDS -->
                    <div id='contact_success' class='alert alert-success'>Thank you. Your message has been sent.</div><!-- /. SUCCESS MESSAGE -->
                    <div id='contact_fail' class='alert alert-danger'> Sorry, don't know what happened. Try later.</div><!-- /. ERROR MESSAGE -->
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

<footer>
    <div class="container">
        <p>&copy; 2014 Sharon &amp; Michael</p>
        
    </div>
</footer>
        

        <!-- INCLUDE jQUERY -->
        <script src="js/vendor/jquery-1.10.1.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

        <!-- DETECT the device type (mobile/desktop) -->
        <script type="text/javascript" src="js/vendor/device.min.js"></script>

        <!-- INCLUDE jQuery waypoints plugin -->
        <script src="js/vendor/waypoints.min.js"></script>

        <!-- INCLUDE flexslider SCRIPT -->
        <script defer src="js/vendor/jquery.flexslider.js"></script>

        <!-- Optional FlexSlider Additions -->
        <script src="js/vendor/jquery.easing.js"></script>
        <script src="js/vendor/jquery.mousewheel.js"></script>

        <!-- INCLUDE bootstrap SCRIPT -->
        <script src="js/vendor/bootstrap.min.js"></script>

        <!-- INCLUDE bootstrap dropdown-on-hover plugin -->
        <script src="js/vendor/bootstrap-hover-dropdown.min.js"></script>

        <!-- INCLUDE parallax plugin -->
        <script src="js/vendor/jquery.parallax.min.js"></script>

        <!-- MEGAFOLIO PRO GALLERY JS FILES -->
        <script type="text/javascript" src="megafolio/js/jquery.themepunch.plugins.min.js"></script>
        <script type="text/javascript" src="megafolio/js/jquery.themepunch.megafoliopro.js"></script>

        <!-- FANCYBOX JS FILES -->
        <script type="text/javascript" src="megafolio/fancybox/jquery.fancybox.pack.js?v=2.1.3"></script>
        <!-- Optionally add helpers - button, thumbnail and/or media ONLY FOR ADVANCED USAGE-->
        <script type="text/javascript" src="megafolio/fancybox/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
        
        <!-- INCLUDE other plugins and scripts AUTHOR MADE -->
        <script src="js/vendor/jquery.queryloader2.js"></script>

        <!-- INCLUDE other plugins and scripts AUTHOR MADE -->
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>


    </body>
</html>
